<!-- 
 @Author: LW  
 @Date: 2021-01-11 13:49:57  
 @function:权限管理-菜单管理
----------------------------------------------------------  
 @Last Modified by: LW-2021-04-08 13:58:16  
 @Modified function:优化界面
 --> 
<template>
  <div>
    <el-card class="box-card card1">
      <div class="searchBox">
        <el-form :inline="true" :model="formSearch">
          <el-form-item label="菜单名称：">
            <el-input v-model="formSearch.name" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="所属应用：">
            <el-select v-model="formSearch.application_id" style="width: 100%" size="mini">
              <el-option
                :label="item.Text"
                :value="item.Value"
                :key="item.Value"
                v-for="item in applications"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="handleAdd()">新增</el-button>
            <el-button size="mini" type="primary" icon="el-icon-upload2" v-if="canUp==true" @click="handleMove(1)">上移</el-button>
            <el-button size="mini" type="primary" icon="el-icon-download" v-if="canDown==true" @click="handleMove(2)">下移</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card">
          <!--列表 -->
          <el-table
            class="ptab"
            border
            stripe
            size="small" 
            :data="listData"
            :height="tableHeight"
            row-key="id"
            @row-click="selectSingle"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column align="left" header-align="center" prop="name" label="菜单名称" width="250">
              <template slot-scope="scope">
                <el-radio
                  v-model="tableRadio"
                  :label="scope.row"
                  @change.native="getTemplateRow(scope.$index,scope.row)"
                  style="margin-left:5px;margin-right:5px !important;"
                >&nbsp;</el-radio>
                <i :class="scope.row.icon_font!=''?'iconfont '+scope.row.icon_font:''"></i>
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" header-align="center" prop="link_url" label="链接地址" width="330"></el-table-column>
            <el-table-column align="left" header-align="center" prop="application_name" label="所属应用名称" width="280"></el-table-column>
            <el-table-column align="center" prop="function_name" label="功能类型" width="100"></el-table-column>
            <el-table-column align="center" prop="is_valid" label="是否启用" width="140">
              <template slot-scope="scope">
                <el-switch
                  on-text="启用"
                  off-text="禁止"
                  on-color="#5B7BFA"
                  off-color="#dadde5"
                  v-model="scope.row.is_valid"
                  @change="forbiddenInfo(scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column align="left" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-plus"
                  size="mini"
                  class="btnBlue1"
                  @click="handleAdd(scope.$index, scope.row)"
                >新增</el-button>
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="mini"
                  class="btnBlue"
                  @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button>
                <el-button
                  type="text"
                  icon="el-icon-remove"
                  size="mini"
                  class="btnRed"
                  @click="handleRemove(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑等操作弹窗 -->
    <!-- dialog 弹窗顶部下划线 v-dialogDrag可拖拽-->
    <el-dialog
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      width="30%"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
      <EditForm v-bind:formInfo="formInfo" @callBack="callBack"></EditForm>
    </el-dialog>
  </div>
</template>
<script>
//引用对象
import EditForm from "./components/edit"; //编辑
import MenusHttp from "@/api/authority/menus"; //http
//定义变量
const {
  loadApplicationList, //获取应用列表信息
  loadMenusList, //获取菜单列表
  moveSort, //移动操作 flag==1上移   flag==2下移
  removeInfo, //删除信息
  forbiddenInfo //启用或停用
} = MenusHttp;
export default {
  components: {
    EditForm
  },
  data() {
    return {
      //列表相关
      tableHeight: window.innerHeight * 0.818, //表格高度
      listData: [],
      tableRadio: {}, //单选选中 行信息
      canUp: true,
      canDown: true,
      formSearch: {
        name: "",
        application_id: ""
      },
      //编辑框窗体参数
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "" //窗体标题
      },
      formInfo: {},
      applications: [] //应用类型
    };
  },
  watch: {},
  computed: {},
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {},
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //获取应用
    this.loadApplicationList();
    //初始化获取列表
    this.loadMenusList();
  },
  //事件方法执行
  methods: {
    //获取应用
    loadApplicationList() {
      let self = this;
      let par = {};
      loadApplicationList(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          self.applications = [{ Text: "全部", Value: "" }];
          data.Data.forEach(element => {
            self.applications.push({
              Text: element.Text,
              Value: element.Value
            });
          });
        } else {
          this.$messageTip.warning(data.Msg); 
        }
      });
    },
    //获取列表数据
    loadMenusList() {
      loadMenusList(this.formSearch).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          this.listData = data.Data;
        } else {
          this.listData = data.Data;
          this.$messageTip.warning(data.Msg);
        }
      });
    },
    //搜索事件
    handleSearch() {
      this.loadMenusList();
    },
    ///////////////////////单选事件/////////////////////
    //单选事件
    getTemplateRow(index, row) {
      this.tableRadio = row;
      this.showHideBtn(row);
    },
    selectSingle(row) {
      this.tableRadio = row;
      this.showHideBtn(row);
    },
    //显示或隐藏移动按钮
    showHideBtn(obj) {
      if (obj.have_elder) {
        this.canUp = true;
      } else {
        this.canUp = false;
      }
      if (obj.have_younger) {
        this.canDown = true;
      } else {
        this.canDown = false;
      }
    },
    //上下移动
    handleMove(type) {
      let par = {
        id: this.tableRadio.id,
        flag: type
      };
      moveSort(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          //初始化获取列表
          this.loadMenusList();
        } else {
          this.$messageTip.warning(data.Msg);
        }
      });
    },
    /////////////////////////////////////
    //新增
    handleAdd(index, row) {
      this.formInfo = {};
      if (row != null) {
        this.formInfo.parent_id = row.id;
      }
      this.editForm.formVisible = true;
      this.editForm.formTitle = "新增菜单信息";
    },
    //编辑界面
    handleEdit(index, row) {
      this.editForm.formVisible = true;
      if (row != null && row != undefined) {
        this.editForm.formTitle = "修改菜单信息";
        //不要直接赋值，不然造成-引用类型传递
        let obj = JSON.parse(JSON.stringify(row)); //row是父组件传递的对象
        this.formInfo = obj;
      }
    },
    //启用或停用
    forbiddenInfo(row) {
      let par = { id: row.id };
      forbiddenInfo(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          //初始化获取列表
          this.loadMenusList();
          this.$messageTip.success(data.Msg);
        } else {
          this.$messageTip.warning(data.Msg);
        }
      });
    },
    //删除
    handleRemove(index, row) {
      this.$messageTip.boxWarning("确定要删除吗?")
        .then(() => {
          let par = [];
          par.push(row.id);
          removeInfo(par).then(response => {
            let data = response.data;
            if (data.Code === 1000) {
              this.$messageTip.success(data.Msg);
              this.loadMenusList();
            } else {
              this.$messageTip.warning(data.Msg);
            }
          });
        })
        .catch(() => {
          this.$messageTip.info(data.Msg);
        });
    },
    //编辑操作回调
    callBack(info) {
      this.editForm.formVisible = false;
      if (info != null && info != "") {
        this.loadMenusList();
      }
    },
    //时间格式化
    dateFormat(row, column, cellValue, index) {
      if (column != null) {
        const daterc = row[column.property];
        if (daterc != null && daterc.indexOf("0001-01-01") == -1) {
          return daterc.slice(0, 10);
        } else {
          return "-";
        }
      } else {
        if (row != null && row.indexOf("0001-01-01") == -1) {
          return row.slice(0, 10);
        } else {
          return "-";
        }
      }
    }
  }
};
</script>

